If playback doesn't begin shortly, try restarting your device.
5 seconds
Miniplayer (i)
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
CancelConfirm
optional here because some of thesequeries will want
111,247 viewsFeb 11, 2019Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch https://fireship.io/lessons/angul…...more
I love that i don't have to spent 30mins on watching tutorial about how to install angular cli and all the basics when i just need what i'm searching for. Thank you <3
Beautiful job as always Jeff! I was just working on page flips for the same. Are there any suggestions on when to do animation work using CSS directly vs using Angular Animations?
Thanks a lot for a great video. But the problem with this approach is that when you open a route for the first time, it slides from left or right, but what if I want it to slide only when I switch manually and not when I open them from the first time from URL?Basically, I need to cancel the animation if a user comes from the same route or just opened the route for the first time.
Great video on animations.Waiting something on dynamic components, ng-content, ng-container, content management in angular,( for.egangular.io ) some advance angular concepts.
When I use AOT in "ng build --aot=true", it shows an error: "Functions expressions are not supported in decorators in x references x. Consider changing the function expression into an exported function". But, when I change it to "export function", it shows the same error. Some ideas?
Hi Jeff,I've followed your tutorial and the animations work great when using ng serve, but when I try to ng build --prod, I get this error:ERROR in src\app\recipe-builder\recipe-builder.component.ts(9,16): Error during template compile of 'RecipeBuilderComponent'
Reference to a non-exported function in 'slider'
'slider' contains the error at src\app\recipe-builder\route-animations.ts(37,10)Any idea why this might be the case for building to production?Thanks
ERROR in app/main/containers/app/app.component.ts(32,5): Error during template compile of 'AppComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at app/main/containers/app/route-animations.ts(20,10).
This doesn't seem to compile when building with ng build --prod . The AOT compiler doesn't like the [direction] key specification. A workaround is to create a function that returns the direction object:export function dir(direction: 'left' | 'right', value: number | string )
{
return direction === 'left' ? { left: value } : { right: value };
}Then call it like so: style(dir(direction, 0)) .Now it's possible to keep using the same animation function without duplicating it for each direction.( ! ) Notice the export keyword as the AOT compiler requires it.
I get this error but the animations still work. ```core.js:15713 ERROR Error: Unable to process animations due to the following failed trigger transitions @routeAnimations has failed due to:- `query(":enter, :leave")` returned zero elements. (Use `query(":enter, :leave", { optional: true })` if you wish to allow this.)- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)- `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)```